<template>
    <wxc-mask height="709"
        width="613"
        border-radius="20px 20px 20px 20"
        duration="200"
        mask-bg-color="rgba(0,0,0,0)"
        :has-animation="hasAnimation"
        :has-overlay="true"
      
        :show="show"
        @wxcMaskSetHidden="wxcMaskSetHidden">
        
        <image class="redpackBg" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/redPackTc.png"></image>
        <!-- <div class="bgc-box">
            <div class="bg-box-top"></div>
        </div> -->
        <!-- <image class="grain-top" src="http://goucai-images.oss-cn-beijing.aliyuncs.com/%E8%9E%BA%E6%97%8B%E7%BA%B9%E8%B7%AF%E4%B8%8A%402x.png"></image>
        <image class="titleText" src="https://goucai-images.oss-cn-beijing.aliyuncs.com/%E6%81%AD%E5%96%9C%E8%8E%B7%E5%BE%97%E6%A2%A6%E6%83%B3%E7%BA%A2%E5%8C%85%402x.png"></image>
        <image class="packShadow" src="https://goucai-images.oss-cn-beijing.aliyuncs.com/%E7%8E%AF%E5%9E%8B%E8%A3%85%E9%A5%B0%402x.png"></image>
        <image class="grain" src="http://goucai-images.oss-cn-beijing.aliyuncs.com/%E8%9E%BA%E6%97%8B%E7%BA%B9%E7%90%862%402x.png"></image>
        <image class="colourBar" src="https://goucai-images.oss-cn-beijing.aliyuncs.com/%E9%87%91%E5%B8%81%E5%BD%A9%E5%B8%A6%E8%A3%85%E9%A5%B0%402x.png"></image> 
        <image class="centerAround" src="https://goucai-images.oss-cn-beijing.aliyuncs.com/%E9%87%91%E8%BE%B9%402x.png"></image> -->
        <image class="centerText" src="https://goucai-images.oss-cn-beijing.aliyuncs.com/%E5%BC%80%402x.png" @click="goLogin()"></image>
    </wxc-mask>
</template>

<script>
import { WxcMask } from 'weex-ui';
let navigator = weex.requireModule("navigator");
import { getBaseUrl } from "@/utils/index.js";
export default {
	components: { WxcMask },
		data: () => ({
			show: true,
			overlayCanClose: true,
			isFalse: false,
			hasAnimation: true,
		}),
		created(){
			this.baseURL = getBaseUrl(weex.config.bundleUrl, true);

		},
	methods: {
		openMask (e) {
			this.show = true
			this.hasAnimation = true
		},
		wxcMaskSetHidden () {
			this.show = false
		},
		goLogin(){
			navigator.push({
				'url': this.baseURL + 'views/login/login.js',
				'animated': 'true'
			})
		}
	}
};
</script>

<style scoped>
.redpackBg{
  position:absolute;
  width:612px;
  height:709px;
  left:-20px;
  
  top:-20px;
}
.bgc-box{
  position: relative;
  top: 30px;
  left: 51px;
  width:533px;
  height: 679px;
  background-image:linear-gradient(to bottom,rgba(227,85,83,1),rgba(204,18,41,1));
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}
.bg-box-top{
  width:533px;
  height:463px;
  background-image:linear-gradient(to bottom right,#FC8738,#E73446);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}
  .grain-top{
    width: 351px;
    height: 463px;
    position: absolute;
    top: 30px;
    left: 50px;
    
  }
  .colourBar {
    position: absolute;
    right: 32px;
    height: 656px;
    width: 577px;
  }
  .topAround{
    width: 351px;
    height: 433px;
    position: absolute;
    top: 30;
    left: 66px;
  }
  .titleText {
    position: absolute;
    top: 150px;
    left: 95px;
    width: 442px;
    height: 160px;
  }
  .centerText {
    position: absolute;
    left: 210px;
    top: 350px;
    width: 214px;
    height: 229px;
  }
 .packShadow {
    width: 387px;
    height: 234px;
    position: absolute;
    left:128px;
    top: 433px;
  }
  .grain {
    width: 190px;
    height: 190px;
    position: absolute;
    top: 518px;
    left: 390px;
  }
  .centerAround{
    position: absolute;
    left: 27px;
    top: 344px;
    width: 566px;
    height: 165px;
  }
</style>
